<script setup lang="ts">
  import HelloWorld from './components/HelloWorld.vue'
  import TheWelcome from './components/TheWelcome.vue'
  import { onMounted } from 'vue';
  import { AliRTSPusher } from 'aliyun-rts-pusher';
  import type { RtsClient } from 'aliyun-rts-pusher';

  let pushClient: RtsClient;
  let cameraStreamId;
  let screenStreamId;
  let videoEffectManager;
  onMounted(async () => {
    pushClient = AliRTSPusher.createClient();
    const videoEl = pushClient.setRenderView('videoContainer');
    videoEffectManager = pushClient.getVideoEffectManager();
    videoEffectManager.enableMixing(true);
    videoEffectManager.setMixingConfig({
      videoWidth:1280,
      videoHeight:720,
      videoFramerate:30
    });
    
    // 打开摄像头
    cameraStreamId = await pushClient.startCamera("d3c8ad8911956b495904c4e9b14f3a4b9bb414ce4551d279ad976639a776f554");
    // 打开屏幕录制
    screenStreamId = await pushClient.startScreenCapture();
    videoEffectManager.setLayout(getLayout());
    
    


    // 打开麦克风
    const micStreamId = await pushClient.startMicrophone();
    const audioEffectManager = pushClient.getAudioEffectManager();
    audioEffectManager.setVolume(100,micStreamId);
    pushClient.startPush('artc://live.tongxinyiliao.com/aaa/bbb?auth_key=1721028256-0-0-6fd273a9eed74c872accf5a0046ff828');
    
  });
  let count = 0;
  function getLayout(){
    let tmp_res;
    if(count%2==0){
      tmp_res = [
        { streamId: screenStreamId, x: 1280/2, y: 720/2, width: 1280, height: 720, zOrder: 1 },
        { streamId: cameraStreamId, x: 320/2, y: 180/2, width: 320, height: 180, zOrder: 2 },
      ]
    }
    else{
      tmp_res = [
        { streamId: cameraStreamId, x: 1280/2, y: 720/2, width: 1280, height: 720, zOrder: 1 },
        { streamId: screenStreamId, x: 320/2, y: 180/2, width: 320, height: 180, zOrder: 2 },
      ]
    }
    count = count+1;
    return tmp_res;
  }
  function changeLayout() {
    videoEffectManager.setLayout(getLayout());
  }
</script>

<template>

  <main>
    <!-- <TheWelcome /> -->
    <div id="videoContainer"></div>
  </main>
  <div>
    <button @click="changeLayout()">切换布局</button>
  </div>
</template>

<style scoped>

.logo {
  display: block;
  margin: 0 auto 2rem;
}

</style>
